<template>
  <view class="container" :class="column">
    <view v-for="(v, i) in dictOptions" :key="i">
      <view
        class="item"
        :class="{
          active:
            (type == 'radio' && index == i) ||
            (type == 'checkbox' && v.checked),
          disabled: isDisabled,
        }"
        :data-i="i"
        @tap="change"
        >{{ v[rangeKey] }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "MySelect",
  props: {
    dictCode: String,
    searchUrl: String,
    type: { type: String, default: "checkbox" },
    rangeKey: { type: String, default: "text" },
    valueKey: { type: String, default: "value" },
    params: { type: Object, default: null },
    isDisabled: { type: Boolean, default: false },
	isAll: { type: Boolean, default: false },
	indexs: { type: Number, default: -1 },
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData();
      },
    },
  },
  data() {
    return {
      dictOptions: [],
	  column:'',
      index: -1,
    };
  },
  mounted(){
	  this.index = this.indexs
  },
  methods: {
    initDictData() {
      //根据字典Code, 初始化字典数组
      if (this.searchUrl) {
        this.$http.get(this.searchUrl, this.params).then((res) => {
          if (res.data.success) {
            this.dictOptions = res.data.result;
			if(this.isAll && this.type == "radio"){
				let dict = {};
				dict[this.rangeKey] = '全部';
				dict[this.valueKey] = '';
				this.dictOptions.unshift(dict)
			}
          }
        });
      } else {
        let code = this.dictCode;
        this.$http.get(`/sys/dict/getDictItems/${code}`).then((res) => {
          if (res.data.success) {
            this.dictOptions = res.data.result;
			if(this.isAll && this.type == "radio"){
				let dict = {};
				dict[this.rangeKey] = '全部';
				dict[this.valueKey] = '';
				this.dictOptions.unshift(dict)
			}
          }
        });
      }
    },
    /* 切换 */
    change(e) {
      if (this.isDisabled) {
        return;
      }
      let i = Number(e.currentTarget.dataset.i);
      /* 单选框 */
      if (this.type == "radio") {
        this.index = i;
        this.$nextTick(() => {
          let data = this.get();
          this.$emit("change", data[this.valueKey]);
        });
        return;
      }
      /* 复选框 */
      if (this.dictOptions[i].checked) {
        this.$set(this.dictOptions[i], "checked", false);
      } else {
        this.$set(this.dictOptions[i], "checked", true);
      }
      this.$nextTick(() => {
        let data = this.get();
        if (data != null) {
          let values = "";
          data.forEach((item) => {
            values += "," + item[this.valueKey];
          });
          this.$emit("change", values.substr(1));
        } else {
          this.$emit("change", "");
        }
      });
    },
    /* 获取值 */
    get() {
      /* 单选框 */
      if (this.type == "radio") {
        if (this.index >= 0) {
          return this.dictOptions[this.index];
        } else {
          return null;
        }
      }

      let arr = [];
      this.dictOptions.forEach((item) => {
        if (item.checked) {
          arr.push(item);
        }
      });
      return arr.length > 0 ? arr : null;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin-right: -20rpx;
  font-size: 28rpx;
  text-align: center;

  & > view {
    margin-bottom: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
  }

  &.col_1 {
    & > view {
      width: 100%;
    }
  }
  &.col_2 {
    & > view {
      width: 50%;
    }
  }
  &.col_3 {
    & > view {
      width: 33.3333333%;
    }
  }

  .item {
    line-height: 68rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    border: #e5e5e5 solid 1px;
    background-color: #fff;
    color: #333;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    // 未选中状态下的禁用样式
    &.disabled {
      background-color: #f1f1f1;
      color: #d8d8d8;
    }

    &.active {
      background-color: #f5fff9;
      color: #42b983;
      border: #42b983 solid 1px;

      &::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-color: #42b983;
        position: absolute;
        right: -1px;
        bottom: -1px;
        z-index: 1;
        clip-path: polygon(100% 0, 0% 100%, 100% 100%);
      }
      &::after {
        content: "";
        display: block;
        width: 3px;
        height: 6px;
        border-right: #fff solid 2px;
        border-bottom: #fff solid 2px;
        transform: rotate(25deg);
        position: absolute;
        right: 3px;
        bottom: 3px;
        z-index: 2;
      }

      // 选中状态下的禁用样式
      &.disabled {
        background-color: #f1f1f1;
        color: #d8d8d8;
        border: #e5e5e5 solid 1px;

        &::before {
          background-color: #d9d9d9;
        }
      }
    }
  }
}
</style>